<template>
  <div id="app">
    <!-- <img
      src="../assets/images/10dfa9ec8a1363277218ef12928fa0ec08fac71d.jpg"
      alt=""
    /> -->
    <img :src="dogImgUrl" alt="" />
    <div :style="{ background: colorful }" @click="changeColor">
      {{ dogName }}
    </div>
  </div>
</template>

<script>
export default {
  props: ["dogName", "dogImgUrl", "index"],
  data() {
    return {
      colorful: "",
    };
  },
  methods: {
    changeColor() {
      this.colorful = "#" + parseInt(Math.random() * 1000);
      this.$emit("subdogList", this.index);
    },
  },
};
</script>

<style>
#app {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  text-align: center;
  float: left;
  margin-right: -1px;
  margin-top: -1px;
}
img {
  width: 100%;
  height: 150px;
}
</style>
